<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-06-29 22:00:35
-->
<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel height="300px">
          <!-- <el-carousel-item v-for="(item, index) in imgList" :key="index"> -->
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <!--绑定变量必须使用v-bind指令  -->
            <img v-bind:src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 板块 -->
      <div class="plates">
        <div class="wrapper">
          <div class="plate" v-for="cas in categoryList" :key="cas.category.id">
            <!-- 头部 -->
            <div class="head">
              <div class="title">{{ cas.category.name }}</div>
              <div class="more">More&gt;&gt;</div>
            </div>
            <!-- 列表数据 -->
            <ul>
              <li @click="toDetails(item.id)" v-for="item in cas.aritcle" :key="item.id">{{ item.title }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 尾部 -->
    <Footer></Footer>
    <!-- /尾部 -->
  </div>
</template>
<script>
import { get, post } from "@/utils/request.js";
import  Header  from "@/components/Header.vue";
import  Footer  from "@/components/Footer.vue";
// 写js代码
export default {
  // 注册组件
  components: {
    // Header:Header
    Header,
    Footer,
  },
  data() {
    return {
      // 存放vue变量
      // 轮播图数组
      imgList: [],
      // 存放资讯列表和文章
      categoryList: [],
    };
  },
  // 存放函数或事件处理程序
  methods: {
    // 跳转到文章详情页面
    toDetails(id){
      this.$router.push({
        path:'project',
        query:{id},
      })
    },
    // 请求所有轮播图
    findALL() {
      // 发请求 箭头函数没有this
      // function test(){}
      // ()=>{//函数体}
      get("/index/carousel/findAll").then((response) => {
        console.log(response);
        // 将后台获取的数据赋值给vue变量
        this.imgList = response.data;
      });
    },

    // 请求栏目对应的文章
    loadArticle() {
      get("/index/article/findCategoryArticles").then((res) => {
        console.log(res);
        this.categoryList = res.data;
      });
    },
  },
  // 生命周期 钩子函数--在页面还没加载完成时候加载数据
  created() {
    this.findALL();
    this.loadArticle();
  },
};
</script>
<style lang="scss">
// 写css样式
// 体部样式
.content {
  background-color: #ecf6f2;
  // 轮播图样式
  .carousel {
    height: 300px;
    img {
      height: 300px;
      width: 100%;
    }
  }
  // 板块样式
  .plates {
    // 清除浮动
    overflow: hidden;
    .plate {
      float: left;
      width: 31.5%;
      background-color: white;
      height: 300px;
      margin-bottom: 2em;
      margin-right: 1.25%;
      .head {
        display: flex;
        justify-content: space-between;
        // 设置字体大小
        font-size: 18px;
        // 设置字体加粗
        font-weight: bold;
        // 游标
        cursor: pointer;
        // 设置字体颜色
        color: black;
      }
      ul > li {
        font-size: 16px;
        cursor: pointer;
        // 取消标签默认样式
        list-style: none;
        // 文本超出一行省略
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        // 行高
        line-height: 3em;
      }
      // 悬浮到标签上
      li:hover {
        color: #003262;
      }
    }
  }
}
</style>